<template>
  <div class="study-wrapper">
    <header style="border-bottom: 1px solid #ccc">
      <h1>课程</h1>
    </header>
    <div class="study-container">
      <div
        class="filter"
        style="
          height: 42px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <el-select
          v-model="query.department_id"
          placeholder="请选择院系"
          clearable
          @change="handleCourseFilter"
          style="width: 240px"
        >
          <el-option
            v-for="item in depts"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          style="width: 260px"
          placeholder="请输入课程名称"
          v-model="query.course_name"
          clearable
          prefix-icon="Search"
          @keyup.native.enter="handleCourseFilter"
        ></el-input>
      </div>
      <div v-loading="loading" class="course-wrapper">
        <el-scrollbar
          :style="{
            height:
              courseList.length < listTotal ? 'calc(100% - 30px)' : '100%',
            width: '100%',
          }"
        >
          <div class="list padding-10">
            <template v-if="courseList.length">
              <div v-for="(item, index) in courseList" :key="index">
                <div
                  class="item-kno border-radius padding-15"
                  style="height: 140px; width: 320px"
                >
                  <div style="display: flex">
                    <div class="w-100 text-center">
                      <el-image
                        fit="cover"
                        :src="imagePrefix + item.cover"
                        :preview-src-list="[imagePrefix + item.cover]"
                        :initial-index="index"
                        class="w-80 h-80 border-radius-s"
                      >
                        <template #error>
                          <TextAvatar
                            :text="item.name"
                            :width="80"
                            style="border-radius: 4px"
                          />
                        </template>
                      </el-image>
                    </div>
                    <div class="pointer" @click="(item) => {}">
                      <div class="multi-line-text title" :title="item.name">
                        <el-text class="font-size-2xl font-bold">
                          {{ item.name }}
                        </el-text>
                      </div>
                      <div class="data-num">
                        <el-button type="primary" link>
                          资料数量:
                          {{ item.document_count }}
                        </el-button>
                      </div>
                      <div class="read-num">
                        <el-button link style="color: #999">
                          阅读数量:
                          {{ item.read_count }}
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div
                    style="
                      height: 30px;
                      display: flex;
                      align-items: center;
                      justify-content: flex-end;
                    "
                  >
                    <el-button
                      size="small"
                      type="primary"
                      plain
                      @click.stop="handleViewDataList(item)"
                    >
                      查看资料
                    </el-button>
                    <el-button
                      size="small"
                      type="warning"
                      plain
                      @click="handleViewDataChart(item)"
                    >
                      知识图谱
                    </el-button>
                  </div>
                </div>
              </div>
            </template>
            <div v-else style="margin: 0 auto">
              <el-empty description="暂无课程" />
            </div>
          </div>
        </el-scrollbar>
        <div class="pagination" v-if="dataList.length < listTotal">
          <pagination
            :total="listTotal"
            v-model:page="query.page"
            v-model:limit="query.limit"
            @pagination="getCourseList"
          />
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="资料列表" width="80vw">
      <div v-loading="dataLoading" class="course-wrapper" style="height: 60vh">
        <el-scrollbar style="height: 100%; width: 100%">
          <div class="list padding-10">
            <template v-if="dataList.length">
              <div
                v-for="(item, index) in dataList"
                :key="index"
                @click="handleViewData(item)"
              >
                <div
                  class="item-kno border-radius padding-10"
                  style="height: 120px; width: 220px"
                >
                  <div style="display: flex; height: 60px">
                    <div class="w-60">
                      <el-icon
                        :size="42"
                        style="color: var(--el-color-primary)"
                      >
                        <Document />
                      </el-icon>
                    </div>
                    <p class="text-title">
                      {{ item.filename }}
                    </p>
                  </div>
                  <div class="data-num" style="font-size: 12px">
                    <el-text link style="color: #999; font-size: 12px">
                      阅读量:
                      {{ item.read_count || 0 }}
                    </el-text>
                    <el-text style="font-size: 12px; color: #999" truncated>
                      上传时间：
                      {{ item.created_at.replace('T', ' ') }}
                    </el-text>
                  </div>
                </div>
              </div>
            </template>
            <div v-else style="margin: 0 auto">
              <el-empty description="暂无资料" />
            </div>
          </div>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { httpCourseList, httpAllDepts, httpCourseData } from '@/api/study'
import Pagination from '@/components/pagination/index.vue'
import TextAvatar from '@/components/text-avatar/index.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const imagePrefix = import.meta.env.VITE_IMAGE_SUFFIX
const query = reactive({
  page: 1,
  limit: 20,
  course_name: '',
  department_id: undefined,
})
const dialogVisible = ref(false)
const depts = ref([])
const loading = ref(false)
const courseList = ref([])
const listTotal = ref(0)
const handleCourseFilter = () => {
  query.page = 1
  getCourseList()
}
const getCourseList = async () => {
  loading.value = true
  const query_data = { ...query }
  const response = await httpCourseList(query_data).catch(() => null)
  loading.value = false
  if (!response) return
  const { list, total } = response
  courseList.value = list
  listTotal.value = total
}
getCourseList()
// ================================= 资料库列表 =================================
const dataLoading = ref(false)
const dataList = ref([]) // 资料库列表
const dataListTotal = ref(0)
const selectedCourse = ref<any>({})
const queryData = reactive({
  page: 1,
  limit: 20,
  course_id: undefined,
  department_id: undefined,
})
const getDataList = async (row) => {
  dataLoading.value = true
  ;(queryData.course_id = row.id), (queryData.department_id = row.department_id)
  const response = await httpCourseData(queryData).catch(() => null)
  dataLoading.value = false
  if (!response) return
  const { list, total } = response
  dataList.value = list
  dataListTotal.value = total
}

const getAllDepts = async () => {
  const res: any = await httpAllDepts()
  if (res && res.list.length) {
    depts.value = res.list
  }
}
getAllDepts()
// 资料列表中查看资料
const handleViewData = (item) => {
  // router.push('/study/data-items/' + item.id)
  const url = router.resolve({
    path: '/study/data-items',
    query: {
      data_id: item.id,
      course_id: selectedCourse.value.id,
    },
  })
  window.open(url.href, '_blank')
}
/**
 * 查看知识图谱
 * @param item
 */
const handleViewDataChart = (item) => {
  // const url = router.resolve({
  //   path: '/study/chart',
  //   query: {
  //     cid: item.id,
  //     pid: item.department_id,
  //   },
  // })
  // window.open(url.href, '_blank')
  router.push({
    path: '/study/chart',
    query: {
      cid: item.id,
      pid: item.department_id,
    },
  })
}
/**
 * 查看课程资料列表
 * @param item
 */
const handleViewDataList = (item) => {
  selectedCourse.value = item
  getDataList(item)
  dialogVisible.value = true
}
// 生成100 -500 的随机数
const getRandomNum = () => {
  return Math.floor(Math.random() * 400) + 100
}
</script>
<style scoped lang="scss">
.study-wrapper {
  height: 100%;
}
.text-title {
  height: 48px;
  width: 100%;
  text-align: start;
  @include textMultipleBeyondOmit(2);
}
.course-wrapper {
  height: calc(100vh - 125px);
  .list {
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .pagination {
    height: 30px;
  }
  .item-kno {
    background: var(--el-bg-color);
    transition: color 0.2s, background-color 0.2s;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.24);
    position: relative;
    cursor: pointer;
    &:hover {
      transform: scale(1.02);
    }
  }

  .dark {
    .item-kno {
      background: var(--el-color-info-light-9);
      box-shadow: var(--el-box-shadow-lighter);
    }
  }
}
</style>
